<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myweb</title>
    <script src="static/js/vue.js"></script>
    <script src="static/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="static/js/bootstrap-3.3.7/js/bootstrap.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
    <div id="app" class="container">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>简介</th>
                    <th>地址</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                </tr>
            </thead>
            <tbody v-if="games.length>0" v-for="item in games">
                <tr>
                    <th v-text="item.id"></th>
                    <td v-text="item.name"></td>
                    <td v-text="item.introduction"></td>
                    <td v-text="item.path"></td>
                    <td v-text="item.create_time"></td>
                    <td v-text="item.update_time"></td>
                    <td><router-link to="role"><button type="button" class="btn btn-success btn-xs">编辑角色</button></router-link></td>
                </tr>
            </tbody>
            <tbody v-if="games.length<=0">
                <tr>
                    <th>暂无数据</th>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            games: [
                {id:1,introduction:'第一个游戏',path:'F:\RenPyGames\Dream',name:'Dream',create_time:'2020-11-03 14:14:27',update_time:'2020-11-03 14:14:30'},
                {id:2,introduction:'第二个游戏',path:'F:\RenPyGames\Dream2',name:'Dream2',create_time:'2020-11-04 14:14:27',update_time:'2020-11-04 14:14:30'}
            ]
        },
        methods: {
            rev: function(){
                this.msg = this.msg.split('').reverse().join('')
            }
        },
    })
</script>